<template>
  <uv-popup ref="popup" mode="bottom" :closeOnClickOverlay="false">
    <div>
      <div class="xzwz">
        <div>&nbsp;</div>
        <div>选择地址</div>
        <div><uv-icon @click="closeTap" name="close"></uv-icon></div>
      </div>
      <div class="fac p1755240112">
        <div class="fac">泰州市&nbsp;
          <uv-icon name="arrow-down"></uv-icon>&nbsp;&nbsp;
        </div>
        <uv-input v-model.trim="form.keywords" placeholder="点击搜索地址" prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
        <div @click="searchTap" style="color: #979898;">&nbsp;&nbsp;搜索</div>
      </div>
      <scroll-view scroll-y scroll-top="0" @scrolltolower="onReachBottom" class="scroll-vertical">
        <div @click="chooseTap(item)" class="list" v-for="(item, index) in tableData" :key="index">
          <div style="width: 95%">
            <div class="title1  single-line">{{item.title}}</div>
            <div class="desc  single-line">{{item.distance}}&nbsp;&nbsp;&nbsp;{{item.address}}</div>
          </div>
          <uv-icon color="rgb(201, 202, 202)" name="arrow-right"></uv-icon>
        </div>
      </scroll-view>
    </div>
  </uv-popup>
</template>
<script>
  import { getNearbyPlaces } from '@/api'

  export default {
    data() {
      return {
        tableData: [],
        total: 0,
        form: {
          page: 1,
          limit: 20,
          lat: 32.455778,
          lng: 119.923116,
          keywords: ''
        },
      }
    },

    methods: {
      open() {
        this.$nextTick(() => {
          this.$refs.popup.open();
          if (this.tableData.length === 0) {
            this._getNearbyPlaces()
          }
        })
      },
      searchTap() {
        this.$set(this.form, 'page', 1)
        this.$set(this.form, 'limit', 20)
        this.tableData = []
        this._getNearbyPlaces()

      },
      closeTap() {
        this.$nextTick(() => {
          this.$refs.popup.close();
        })
      },
      chooseTap(item) {
        this.$emit('choose', item)
        this.$refs.popup.close();
      },
      onReachBottom() {
        if (this.total > this.tableData.length) {
          let page = this.form.page
          this.$set(this.form, 'page', page + 1)
          this._getNearbyPlaces()
        }
      },
      _getNearbyPlaces() {
        uni.showLoading({ title: '加载中', mask: true })
        getNearbyPlaces(this.form).then(res => {
          if (res.code === 200) {
            uni.hideLoading()
            this.total = res.result.total
            this.tableData = this.tableData.concat(res.result.data)
          }
        })
      }
    },
  }
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
  .xzwz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 30rpx;
    padding-left: 40rpx;
    border-bottom: 2rpx solid #eeeeee;
  }

  .p1755240112 {
    padding: 20rpx;
    border-bottom: 2rpx solid #eeeeee;
  }

  .scroll-vertical {
    height: calc(100vh - 280rpx);
  }

  .title1 {
    font-size: 28rpx;
    color: #333333;
    padding-right: 20rpx;
    width: 95%;
  }

  .desc {
    font-size: 26rpx;
    color: #ADADAE;
    padding-right: 20rpx;
    padding-top: 10rpx;
    width: 95%;
    box-sizing: border-box;
  }

  .list {
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 2rpx solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }
</style>